<template>
	<view style="padding: 25rpx 0;">
		<!-- 最新推荐 -->
		<view class="font-weight font-30 m-l-30">最新推荐</view>
		<swiper :indicator-dots="true" :autoplay="true" :circular="false" 
		:interval="3000" :duration="1000" :indicatorDots="false"
			class="swiperA">
			<swiper-item v-for="(item,i) in homecommenLsit" :key="i" class="swiper-item" @click="$util.redirectTo('/otherpages/userDetali/userDetali',{id:item.id})">
				<view class="swiper-itemA">
					<image  :src="$util.img(item.cover_image)" class="swiper-itemA-image" mode="aspectFill"></image>
					<view class="swiper-item-txt">
						<view class="flex_b">
							<view class="flex">
								<view class="font-weight m-r-10">{{item.nickname||'微信用户'}}</view>
								<image class="w-32 h-32 m-r-10" v-if="item.is_vip==1||item.level>1" src="../../static/icon/ic1.png" mode=""></image>
								<!-- <image class="w-32 h-32" v-if="item.is_auth==1" src="../../static/icon/ic2.png" mode=""></image> -->
								<view class="h-32 m-r-10 shiming" v-if="item.is_auth==1">已实名</view>	
							</view>
							<view class="f-t" v-if="item.is_line==1" >在线</view>
						</view>
						<view class="grey m-t-10 flex">{{item.gender==1?'男':'女'}}｜{{item.age||0}}岁｜{{item.height||0}}｜{{item.constellation||'未设置星座'}}</view>
						<view class="flex m-t-10 flexWrap" style="flex-wrap: wrap !important;">
							<view class="flex m-r-30 iconBox" v-if="item.career_name">
								<text class="m-r-10 icon-gongwenbao iconfont"></text>
								<text>{{item.career_name}}</text>
							</view>
							<view class="flex iconBox" v-if="item.city">
								<text class="icon-shouhuodizhi iconfont m-r-10"></text>
								<text>{{item.city}}</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 为你推荐 -->
		<view class="flex_b p-l-30 p-r-30">
			<view class="font-30 font-weight">为你推荐</view>
			<view class="flex" @click="$util.redirectTo('/otherpages/recommend/recommend')">
				<view class="font-24 grey">查看更多</view>
				<view style="font-size: 24rpx;" class="iconfont icon-xiangyoujiantou font-24 grey"></view>
			</view>
		</view>
		<block v-for="(item,i) in recommendList">
			<recommendItem :item="item"></recommendItem>
		</block>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				],
				recommendList:[],
				homecommenLsit:[]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.recommendListFn()
			this.newRecommendListFn()
		},
		methods: {
			// 最新推荐
			newRecommendListFn() {
				this.$api.sendRequest({
					url:'/api/Friends/homecommenLsit',
					data:{
						pege:1,
						limit:10
					},success:res=>{
						this.homecommenLsit = res.data
					}
				})
			},
			
			// 为你推荐
			recommendListFn() {
				this.$api.sendRequest({
					url:'/api/Friends/recommendList',
					data:{
						pege:1,
						limit:10	
					},success:res=>{
						this.recommendList = res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-color: #ffc9b2;
	// }
	.flexWrap {
		flex-wrap: wrap;
	}
	.iconBox {
		height: 44rpx;
		background: #F7F7F7;
		border-radius: 6rpx;
		line-height: 44rpx;
		padding: 0 12rpx;
	}
	.swiperA {
		height: 682rpx !important;
		margin: 20rpx auto;
	}

	.swiper-item {
		width: 614rpx !important;
		border-radius: 16rpx;
		box-sizing: border-box;
		left: 70rpx;
		.swiper-itemA {
			  width: 100%;
			  display: block;
			  height: 100%;
			  transform: scale(0.96);
			  transition: all 0.2s ease-in 0s;
			  overflow: hidden;
			  border-radius: 20rpx;
			  text-align: center;
			  background: #fff;
		}

		.swiper-itemA-image {
			height: 480rpx !important;
			width: 614rpx !important;
			margin: 0 auto;

		}

		.swiper-item-txt {
			width: 564rpx;
			background-color: #fff;
			padding: 25rpx;
		}
	}
</style>
<template>
	<view style="padding: 25rpx 0;">
		<!-- 最新推荐 -->
		<view class="font-weight font-30 m-l-30">最新推荐</view>
		<swiper :indicator-dots="true" :autoplay="true" :circular="false" 
		:interval="3000" :duration="1000" :indicatorDots="false"
			class="swiperA">
			<swiper-item v-for="(item,i) in homecommenLsit" :key="i" class="swiper-item" @click="$util.redirectTo('/otherpages/userDetali/userDetali',{id:item.id})">
				<view class="swiper-itemA">
					<image  :src="$util.img(item.cover_image)" class="swiper-itemA-image" mode="aspectFill"></image>
					<view class="swiper-item-txt">
						<view class="flex_b">
							<view class="flex">
								<view class="font-weight m-r-10">{{item.nickname||'微信用户'}}</view>
								<image class="w-32 h-32 m-r-10" v-if="item.is_vip==1||item.level>1" src="../../static/icon/ic1.png" mode=""></image>
								<!-- <image class="w-32 h-32" v-if="item.is_auth==1" src="../../static/icon/ic2.png" mode=""></image> -->
								<view class="h-32 m-r-10 shiming" v-if="item.is_auth==1">已实名</view>	
							</view>
							<view class="f-t" v-if="item.is_line==1" >在线</view>
						</view>
						<view class="grey m-t-10 flex">{{item.gender==1?'男':'女'}}｜{{item.age||0}}岁｜{{item.height||0}}｜{{item.constellation||'未设置星座'}}</view>
						<view class="flex m-t-10 flexWrap" style="flex-wrap: wrap !important;">
							<view class="flex m-r-30 iconBox" v-if="item.career_name">
								<text class="m-r-10 icon-gongwenbao iconfont"></text>
								<text>{{item.career_name}}</text>
							</view>
							<view class="flex iconBox" v-if="item.city">
								<text class="icon-shouhuodizhi iconfont m-r-10"></text>
								<text>{{item.city}}</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 为你推荐 -->
		<view class="flex_b p-l-30 p-r-30">
			<view class="font-30 font-weight">为你推荐</view>
			<view class="flex" @click="$util.redirectTo('/otherpages/recommend/recommend')">
				<view class="font-24 grey">查看更多</view>
				<view style="font-size: 24rpx;" class="iconfont icon-xiangyoujiantou font-24 grey"></view>
			</view>
		</view>
		<block v-for="(item,i) in recommendList">
			<recommendItem :item="item"></recommendItem>
		</block>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				],
				recommendList:[],
				homecommenLsit:[]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.recommendListFn()
			this.newRecommendListFn()
		},
		methods: {
			// 最新推荐
			newRecommendListFn() {
				this.$api.sendRequest({
					url:'/api/Friends/homecommenLsit',
					data:{
						pege:1,
						limit:10
					},success:res=>{
						this.homecommenLsit = res.data
					}
				})
			},
			
			// 为你推荐
			recommendListFn() {
				this.$api.sendRequest({
					url:'/api/Friends/recommendList',
					data:{
						pege:1,
						limit:10	
					},success:res=>{
						this.recommendList = res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-color: #ffc9b2;
	// }
	.flexWrap {
		flex-wrap: wrap;
	}
	.iconBox {
		height: 44rpx;
		background: #F7F7F7;
		border-radius: 6rpx;
		line-height: 44rpx;
		padding: 0 12rpx;
	}
	.swiperA {
		height: 682rpx !important;
		margin: 20rpx auto;
	}

	.swiper-item {
		width: 614rpx !important;
		border-radius: 16rpx;
		box-sizing: border-box;
		left: 70rpx;
		.swiper-itemA {
			  width: 100%;
			  display: block;
			  height: 100%;
			  transform: scale(0.96);
			  transition: all 0.2s ease-in 0s;
			  overflow: hidden;
			  border-radius: 20rpx;
			  text-align: center;
			  background: #fff;
		}

		.swiper-itemA-image {
			height: 480rpx !important;
			width: 614rpx !important;
			margin: 0 auto;

		}

		.swiper-item-txt {
			width: 564rpx;
			background-color: #fff;
			padding: 25rpx;
		}
	}
</style>
